<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-tree :data="menuTree" node-key="id" ref="menuTree" :expand-on-click-node="false" :default-expand-all="true" :highlight-current="true" :render-content="renderCompanyTree" :check-strictly="true" @check-change="handleCheckChange" @node-click="handleNodeClick">
        </el-tree>
      </el-col>
      <el-col :span="20">
        <el-card>

          <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
            <el-row>
              <el-col :span="10">
                <el-form-item label="应用" label-width="50px">
                  <el-select v-model="form.status" placeholder="请选择" style="width: 160px;">
                    <el-option v-for="item in appList" :key="item.id" :label="item.applicationNameZh" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="模块" label-width="50px">
                  <el-select v-model="form.moduleName" placeholder="请选择" style="width: 160px;">
                    <el-option v-for="item in appModuleList" :key="item.moduleName" :label="item.moduleName" :value="item.moduleName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-button type="primary" class="mb-1" icon="el-icon-search" size="middle" @click="searchInterfaceList">
                    查询
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-table ref="multipleTable" :data="interfaceData" border style="width: 100%;" height="calc(100vh - 220px)" row-key="id" @select="handleSelect">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="moduleName" label="模块名称" width="180" show-overflow-tooltip="">
            </el-table-column>
            <el-table-column prop="requestName" label="接口名称" width="180" show-overflow-tooltip="">
            </el-table-column>
            <el-table-column prop="requestUrl" label="接口地址"></el-table-column>
          </el-table>
          <div style="margin-top: 25px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNum" :page-sizes="[10, 20, 50]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
    
<script>

import { getMenuTree, getMenuRelInterface, changeMenuRelInterface } from "@/api/menu";
import { getAppList, getAppModuleList, getAppInterfaceList } from "@/api/application";
export default {
  data () {
    return {
      selectMenuId: "",
      menuTree: [],
      relInterfaceArr: [],
      appList: [],
      appModuleList: [],
      form: {
        appId: '',
        moduleName: ''
      },
      params: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      interfaceData: [],
      // isShowDialog: false,
      // isShowDelete: false,
      // companyList: [],
      // orgItem: undefined,
      // postItem: undefined
    }
  },
  mounted () {
    this.selectMenuId = this.$route.query.menuid
    this.getMenuTree()
    this.getMenuRelInterface()
    this.getAppList()
    this.getAppModuleList()
    this.getAppInterfaceList()
  },
  methods: {
    getMenuTree () {
      const param = {}
      getMenuTree(param).then((res) => {
        if (res.status === 200) {
          this.menuTree = res.data;
          this.$refs.menuTree.setCheckedKeys([this.selectMenuId]);
        } else {
          this.$message(res.message);
        }
      });
    },
    getMenuRelInterface () {
      const param = { menuId: this.selectMenuId }
      getMenuRelInterface(param).then((res) => {
        if (res.status === 200) {
          this.relInterfaceArr = res.data;
        } else {
          this.$message(res.message);
        }
      });
    },
    getAppList () {
      const param = {}
      getAppList(param).then((res) => {
        if (res.status === 200) {
          this.appList = res.data;
          this.getAppModuleList()
        } else {
          this.$message(res.message);
        }
      });
    },
    getAppInterfaceList () {
      const param = { ...this.form, ...this.params }
      getAppInterfaceList(param).then((res) => {
        if (res.status === 200) {
          this.interfaceData = res.data.records;
          this.total = res.data.total
        } else {
          this.$message(res.message);
        }
      });
    },
    searchInterfaceList () {
      this.params.pageNo = 1
      this.getAppInterfaceList()
    },
    getAppModuleList () {
      const param = { appId: this.form.appId }
      getAppModuleList(param).then((res) => {
        if (res.status === 200) {
          this.appModuleList = res.data;
        } else {
          this.$message(res.message);
        }
      });
    },
    handleSelect (selection, row) {
      const isExist = selection.find(item => item.id === row.id)
      if (isExist) {
        this.changeMenuRelInterface(row, true)
      } else {
        this.changeMenuRelInterface(row, false)
      }
    },
    changeMenuRelInterface (row, isSelect) {
      const param = { menuId: this.selectMenuId, ...row, interfaceName: row.requestName, isSelect: isSelect }
      changeMenuRelInterface(param).then((res) => {
        // if (res.status === 200) {
        //   this.$message(res.data);
        // } else {
        //   this.$message(res.message);
        // }
      });
    },
    renderCompanyTree (h, { node, data, store }) {
      let fontSize = "14px"
      let textColor = 'black'
      if (node.checked) {
        textColor = 'blue'; // 选中时文字变为红色
      }
      let labelV = node.data.menuName
      return h('span', [
        // h("i", {
        //   class: iconName, style: {
        //     fontSize: "14px"
        //   }
        // }),
        // h('span', '内层文本1'), h('span', '内层文本2'),
        h('span', {
          style: {
            fontSize: fontSize,
            color: textColor
          }
        }, labelV)
      ]);
    },
    handleCheckChange (data, checked, indeterminate) {
      if (checked && data.children && data.children.length > 0) {
        // 如果父节点被选中，手动取消子节点的选中状态
        data.children.forEach(child => {
          this.$refs.tree.setChecked(child.id, false);
        });
      }
    },
    handleNodeClick (data) {
      // this.$refs.companyOrgTree.setCheckedKeys([data.id]);
      // this.params.pageNum = 1
      // this.orgItem = data
      // this.getPostPage()
      this.selectMenuId = data.id
      this.getMenuTree()
      this.getMenuRelInterface()
      this.getAppList()
      this.getAppModuleList()
      this.getAppInterfaceList()
    },
    handleSizeChange (row) {
      this.params.pageSize = row
      this.params.pageNo = 1
      this.getAppInterfaceList()
      this.getMenuRelInterface()
    },
    handleCurrentChange (row) {
      this.params.pageNo = row
      this.getAppInterfaceList()
      this.getMenuRelInterface()
    }
  },
  watch: {
    relInterfaceArr (newValue, oldValue) {
      // 在这里可以执行更多的逻辑
      if (newValue.length > 0 || newValue !== undefined) {
        const that = this
        // if (that.interfaceData.length > 0) {
        //   setTimeout(function () {
        //     newValue.forEach(item => {
        //       // 假设我们要默认选中id为2的行
        //       const rowToSelect = that.interfaceData.find(row =>
        //         row.moduleName === item.moduleName && row.requestName === item.interfaceName && row.requestUrl === item.requestUrl
        //       );
        //       console.log("arr")
        //       if (rowToSelect) {
        //         that.$refs.multipleTable.toggleRowSelection(rowToSelect);
        //       }
        //     })
        //   }, 100);
        // }
      }
    },
    interfaceData (newValue, oldValue) {
      // 在这里可以执行更多的逻辑
      if (newValue.length > 0 || newValue !== undefined) {
        const that = this
        if (that.relInterfaceArr.length > 0) {
          setTimeout(function () {
            that.relInterfaceArr.forEach(item => {
              // 假设我们要默认选中id为2的行
              const rowToSelect = newValue.find(row =>
                row.moduleName === item.moduleName && row.requestName === item.interfaceName && row.requestUrl === item.requestUrl
              );
              if (rowToSelect) {
                that.$refs.multipleTable.toggleRowSelection(rowToSelect);
              }
            })
          }, 100);
        }
      }
    }
  },
}
</script>
    
<style scoped>
::v-deep .el-table__body tr.current-row > td.el-table__cell,
.el-table__body tr.selection-row > td.el-table__cell {
  background-color: white !important;
  color: blue !important;
}
</style>